import Layouts from '@/components/Layout';
import React, { useEffect, useState } from 'react';
import './index.less';
import { CrownOutlined, FieldTimeOutlined, TeamOutlined } from '@ant-design/icons';
import {
  Avatar,
  Button,
  Divider,
  Typography,
  Image,
  Form,
  DatePickerProps,
  DatePicker,
  TimePicker,
  TimePickerProps,
  Select,
  Empty,
  message,
} from 'antd';
import { useParams, history } from 'umi';
import { getTourDetail, orderTour, wishTour } from '@/service/api/touractivity';
import { TourDetail } from '@/types/touractivity';
import configs from '../../../../config/env';
import dayjs from 'dayjs';
const ToursDetail: React.FC = () => {
  const params: { id: string } = useParams();
  const [form] = Form.useForm();
  const [tourDetailInfo, setTourDetailInfo] = useState<TourDetail>();
  const [orderBtnLoading, setOrderBtnLoading] = useState<boolean>(false);
  const [wishBtnLoading, setWishBtnLoading] = useState<boolean>(false);
  const onFinish = async (values: any) => {
    try {
      setOrderBtnLoading(true);
      const res: any = await orderTour({
        advDate: `${dayjs(values.date).format('YYYY-MM-DD')} ${dayjs(values.time).format(
          'HH:mm:ss',
        )}`,
        advId: Number(params.id),
        peopleNum: values.people,
      });
      if (res) {
        form.resetFields();
        return message.success(res.msg);
      }
    } finally {
      setOrderBtnLoading(false);
    }
  };
  const handleWish = async () => {
    try {
      setWishBtnLoading(true);
      const res: any = await wishTour({
        advId: Number(params.id),
      });
      if (res) {
        message.success(res.msg);
      }
    } finally {
      setWishBtnLoading(false);
    }
  };
  const onChange: DatePickerProps['onChange'] = (date, dateString) => {
    console.log(date, dateString);
  };
  const onChangeTime: TimePickerProps['onChange'] = (time) => {
    console.log(time);
  };
  const getTourDetailData = async () => {
    const { data }: { data: TourDetail } = await getTourDetail({
      id: Number(params.id),
    });
    setTourDetailInfo(data);
  };
  useEffect(() => {
    // 如果详情id不能转成数字的话就证明是用户在路径随便输入的字符串
    if (!isNaN(Number(params.id))) {
      getTourDetailData();
    } else {
      history.push('/404');
    }
  }, []);
  const tl = () => {
    return (
      <div className="detail_cover_pic_wrapper">
        <img
          src={
            tourDetailInfo?.bacImg
              ? configs[process.env.API_ENV as any].API_SERVER + tourDetailInfo?.bacImg
              : '/images/16648898720.jpg'
          }
          alt=""
        />
        <div className="order_wrapper">
          <div className="order_money">
            <div className="left_num">约{tourDetailInfo?.price}元</div>
            <div className="right_text">每人</div>
          </div>
          <Divider></Divider>
          <div>
            <Form name="basic" onFinish={onFinish} autoComplete="off" form={form}>
              <Form.Item
                label="日期"
                name="date"
                rules={[{ required: true, message: '请选择日期' }]}
              >
                <DatePicker onChange={onChange} style={{ width: '100%' }} />
              </Form.Item>
              <Form.Item
                label="时间"
                name="time"
                rules={[{ required: true, message: '请选择时间' }]}
              >
                <TimePicker onChange={onChangeTime} style={{ width: '100%' }} />
              </Form.Item>
              <Form.Item
                label="人员"
                name="people"
                rules={[{ required: true, message: '请选择人员' }]}
              >
                <Select
                  placeholder="请选择人员"
                  style={{ width: '100%' }}
                  options={[
                    {
                      value: 1,
                      label: '1',
                    },
                    {
                      value: 2,
                      label: '2',
                    },
                    {
                      value: 3,
                      label: '3',
                    },
                    {
                      value: 4,
                      label: '4',
                    },
                    {
                      value: 5,
                      label: '5',
                    },
                    {
                      value: 6,
                      label: '6',
                    },
                    {
                      value: 7,
                      label: '7',
                    },
                    {
                      value: 8,
                      label: '8',
                    },
                    {
                      value: 9,
                      label: '9',
                    },
                    {
                      value: 10,
                      label: '10',
                    },
                  ]}
                />
              </Form.Item>
              <Form.Item>
                <Button
                  type="primary"
                  htmlType="submit"
                  style={{ width: '100%' }}
                  loading={orderBtnLoading}
                >
                  请求预定
                </Button>
                <Button
                  type="primary"
                  ghost
                  style={{ width: '100%', marginTop: 20 }}
                  onClick={handleWish}
                  loading={wishBtnLoading}
                >
                  保存到愿望单
                </Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
    );
  };
  return (
    <Layouts tl={tl()}>
      <div className="info_container">
        <div className="tours_info">
          <div className="left_avatar_wrapper">
            <Avatar
              size={100}
              src={
                tourDetailInfo?.user.avatar
                  ? configs[process.env.API_ENV as any].API_SERVER + tourDetailInfo?.user.avatar
                  : '/images/cat.e69c9c17.jpg'
              }
            />
            <div className="user_name">{tourDetailInfo?.user.nickName}</div>
          </div>
          <div className="right_tours_info">
            <Typography.Title level={3} className="info_tit">
              {tourDetailInfo?.title}
            </Typography.Title>
            <Typography.Text className="info_text">
              {tourDetailInfo?.city} · {tourDetailInfo?.country} ·
            </Typography.Text>
            <div className="icon_wrapper">
              <div className="icon_item">
                <div className="top_icon">
                  <FieldTimeOutlined />
                </div>
                <div className="bottom_desc">{tourDetailInfo?.time}小时</div>
              </div>
              <div className="icon_item">
                <div className="top_icon">
                  <TeamOutlined />
                </div>
                <div className="bottom_desc">
                  {tourDetailInfo?.peopleStartNum}~{tourDetailInfo?.peopleEndNum}人
                </div>
              </div>
              <div className="icon_item">
                <div className="top_icon">
                  <CrownOutlined />
                </div>
                <div className="bottom_desc">{tourDetailInfo?.difficulty}</div>
              </div>
            </div>
          </div>
        </div>
        <div className="tours_intor">
          <div className="panel_item">
            <Typography.Title level={3} className="panel_tit">
              摘要
            </Typography.Title>
            <div className="panel_content">
              <p>{tourDetailInfo?.abstracts}</p>
              <Button
                type="primary"
                ghost
                onClick={() => {
                  history.push({
                    pathname: '/msg-detail/' + tourDetailInfo?.user.userId,
                    query:{
                      nickName: tourDetailInfo?.user.nickName as string ?? tourDetailInfo?.user.userName as string
                    }
                  });
                }}
              >
                联系主持人
              </Button>
            </div>
          </div>
          <Divider></Divider>
          <div className="panel_item">
            <Typography.Title level={3} className="panel_tit">
              冒险内容
            </Typography.Title>
            <div className="panel_content">
              <p>{tourDetailInfo?.describes}</p>
            </div>
          </div>
          <Divider></Divider>
          <div className="panel_item">
            <Typography.Title level={3} className="panel_tit">
              时间
            </Typography.Title>
            <div className="panel_content">
              <p>{tourDetailInfo?.advTime}</p>
            </div>
          </div>
          <Divider></Divider>
          <div className="panel_item">
            <Typography.Title level={3} className="panel_tit">
              备注
            </Typography.Title>
            <div className="panel_content">
              <p>{tourDetailInfo?.remark}</p>
            </div>
          </div>
          <Divider></Divider>
          <div className="panel_item">
            <Typography.Title level={3} className="panel_tit">
              集合地点
            </Typography.Title>
            <div className="panel_content">
              <p>{tourDetailInfo?.place}</p>
            </div>
          </div>
          <Divider></Divider>
          <div className="panel_item">
            <Typography.Title level={3} className="panel_tit">
              行程
            </Typography.Title>
            <div className="panel_content">
              <p>{tourDetailInfo?.trip}</p>
            </div>
          </div>
          <Divider></Divider>
          <div className="panel_item">
            <Typography.Title level={3} className="panel_tit">
              照片
            </Typography.Title>
            <div className="panel_content" style={{ margin: '0 -20px', paddingRight: 0 }}>
              <Image.PreviewGroup>
                {tourDetailInfo?.picture &&
                  tourDetailInfo?.picture
                    .split(',')
                    .map((item, index) => (
                      <Image
                        width={200}
                        height={200}
                        style={{ objectFit: 'cover' }}
                        key={index}
                        src={configs[process.env.API_ENV as any].API_SERVER + item}
                      />
                    ))}
              </Image.PreviewGroup>
              {!tourDetailInfo?.picture && (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无图片"></Empty>
              )}
            </div>
          </div>
        </div>
      </div>
    </Layouts>
  );
};
export default ToursDetail;
